<template>
	<view class="content" :class="'theme-'+theme">
		<my-search-header v-model="searchParams.keyword" :showRightBtn="false" @back="clickBack"
			placeholder="输入订单号或商品名称" :inputConfig="{disabled:true}" @click="toSearch">
			<text @click="clickShowFilter">筛选</text>
		</my-search-header>
		<u-tabs-swiper ref="uTabs" :offset="[5, 40]" class="my-tabs" :active-color="themeColor" :list="tabs"
			:current="current" @change="tabsChange" :is-scroll="false">
		</u-tabs-swiper>
		<swiper class="my-swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view>
						<!-- 订单列表 -->
						<view v-for="(item,index) in orderList" :key="index" class="order-item">
							<view v-if="item.orders.length>1" class="order-list">
								<text class="split-title">订单号:{{item.sn}}</text>
								<view class="split-time">{{item.createTime}}</view>
								<view class="description">您订单中的商品属于不同于协议或供应商，故拆分为以下订单分开配送</view>
							</view>
							<view v-for="(order,orderIndex) in item.orders" :key="orderIndex">
								<view @click="toDetail(order.sn)">
									<view v-if="item.orders.length==1" class="bottom" style="padding-bottom: 0;">
										<view class="header-txt">
											订单号:{{order.sn}}
										</view>
									</view>
									<view class="i-top b-b">
										<text v-if="supplierInfoShow" class="eticon eticon-gongyingshang themeTextColor"
											style="margin-left: 0;margin-right: 16rpx;font-size: 20px;"></text>
										<view class="time">
											<text v-if="supplierInfoShow">{{order.supplierName}}</text>
											<online-service v-if="supplierCustomerGroup[order.supplierId]" @service="toService(order,order.supplierId)"></online-service>
										</view>
										<u-image style="margin-left: 10rpx;"
											v-if="order.protocolType==='eplus'&&order.productLogo!=''"
											:src="order.productLogo" width="100rpx" height="50rpx"></u-image>
										<text class="state themeTextColor">{{statusData[order.status]}}</text>
									</view>
									<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in order.items"
										:key="goodsIndex">
										<image class="goods-img" :src="goodsItem.thumbnail" mode="aspectFill"></image>
										<view class="right">
											<text class="title clamp">{{goodsItem.productName}}</text>
											<view class="attr-box">
												<text class="attr"> x {{goodsItem.num}}</text>
												<view class="action" v-if="order.status === 'completed'"
													@click.stop="clickAftersale(order,goodsItem,1)">申请售后</view>
											</view>
											<text class="price">{{goodsItem.price|twoBitMoney}}</text>
										</view>
									</view>
									<view class="bottom">
										<view class="time-text">{{order.createTime}}</view>
										<view class="price-box">
											金额
											<text class="price">￥{{order.amount|twoBitMoney}}</text>
										</view>
									</view>
								</view>
								<view class="action-box b-t" v-if="order.status === 'completed'">
									<view class="action-btn" v-if="enableOneMoreOrder" @click="addToCart(order)">
										再来一单
									</view>
									<view v-if="!order.isHasReview"
										class="action-btn recom themeBorderColor themeTextColor"
										@click="toEvaluate(order)">评价</view>
									<template v-else>
										<template v-if="!order.isDeleteReview">
											<view class="action-btn" @click="toSeeEvaluate(order)">查看评价</view>
											<view v-if="enableAddReviewOrder && !order.isAddonReview" class="action-btn"
												@click="toSeeEvaluate(order,'&addon=1')">追评</view>
										</template>
										<view style="margin-left: 24rpx;" v-else>评价已删除</view>
									</template>
								</view>
							</view>
						</view>
						<uni-load-more :status="loadingType"></uni-load-more>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="showFilter" mode="right" width="70%" class="filter">
			<view style="padding-bottom: 100rpx;">
				<view class="filter_h">
					下单时间
				</view>
				<view class="filter_w">
					<view class="filter_w_item date" :class="{active:filterParams.dateType===1}" @click="changeDate(1)">
						近1个月
					</view>
					<view class="filter_w_item date" :class="{active:filterParams.dateType===3}" @click="changeDate(3)">
						近3个月
					</view>
					<view class="filter_w_item date" :class="{active:filterParams.dateType===6}" @click="changeDate(6)">
						近6个月
					</view>
				</view>
				<view class="filter_w" style="justify-content: center;">
					<view class="filter_w_item range">
						<input placeholder="开始日期" @click="clickShowDatePicker(1)" disabled
							v-model="filterParams.startTime" placeholder-class="ph" />
					</view>
					<view class="filter_w_split">-</view>
					<view class="filter_w_item range">
						<input placeholder="结束日期" @click="clickShowDatePicker(2)" disabled
							v-model="filterParams.endTime" placeholder-class="ph" />
					</view>
				</view>
				<view class="filter_h">
					供应商
				</view>
				<view class="filter_w">
					<view class="filter_w_item" @click="changeSupplier(supplier.supplierId)"
						:class="{active:filterParams.supplierIds.includes(supplier.supplierId)}"
						v-for="supplier in supplierList" :key="supplier.supplierId">
						{{supplier.supplierName}}
					</view>
				</view>
			</view>
			<view class="filter_b">
				<u-button size="medium" @click="resetFilterParams">重置</u-button>
				<u-button size="medium" type="error" @click="confirmFilterParams">确认</u-button>
			</view>
		</u-popup>
		<u-picker v-if="showDatePicker" v-model="showDatePicker" mode="time" :params="dateParams" safe-area-inset-bottom
			:defaultTime="computedDefaultTime" @confirm="confirmDate"></u-picker>
		<online-service v-if="isShowCustomerService" is-platform></online-service>
	</view>
</template>

<script>
	import OnlineService from '../../components/online-service/online-service.vue'
	import {
		mapState
	} from 'vuex';
	import moment from 'moment'
	import MySearchHeader from '@/components/my-search-header/my-search-header.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		getOrderList,
		getAllStatus,
		getWaitReviewCount,
		evaluationCount,
		orderMasterSupplierList,
		buyAgain,
		applyAftersale
	} from '../../api/order/order';
	import {
		showRuleSupplierInfoShow,
		qryConfByItemCode,
		listCustomerGroupBySupplierId
	} from '@/api/user/user.js'
	import { onlineService } from '../../api/index';
	export default {
		components: {
			MySearchHeader,
			uniLoadMore,
			OnlineService
		},
		data() {
			return {
				// 筛选弹窗
				showFilter: false,
				searchParams: {
					page: 1,
					limit: 10,
					status: 'waitReview',
					keyword: ''
				},
				loadingType: 'more',
				orderList: [],
				statusData: {},
				integralRule: uni.getStorageSync('integralRule'),
				detailOrderTotal: {},
				current: 0,
				swiperCurrent: 0,
				tabs: [{
						name: '待评价',
						status: 'waitReview',
						count: 0
					},
					{
						name: '待追评',
						status: 'chaseEvaluation',
						count: 0
					},
					{
						name: '已评价',
						status: 'hasEvaluation',
						count: 0
					},
				],
				// 筛选参数
				filterParams: {
					startTime: '',
					endTime: '',
					date: [],
					supplierIds: [],
					dateType: -1,
					pickerType: 1,
				},
				oldFilterParams: {
					startTime: '',
					endTime: '',
					date: [],
					supplierIds: [],
					dateType: -1,
					pickerType: 1,
				},
				filterSearchParams:{},
				// 下单时间选择器
				showDatePicker: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				// 供应商列表
				supplierList: [],
				// 是否开启追评
				enableAddReviewOrder: true,
				// 供应商配置
				supplierInfoShow: true,
				enableOneMoreOrder: true,
				// 供应商在线客服map
				supplierCustomerGroup:{},
				// 是否显示平台客服
				isShowCustomerService:0
			};
		},
		onLoad(option) {
			// 初始化是否显示客服
			this.isShowCustomerService = uni.getStorageSync('isShowCustomerService')
			  ? Number(uni.getStorageSync('isShowCustomerService')) : 1
			this.loadData()
			this.getStatusData()
			this.loadCountData()
			this.loadSupplierList()
			// 获取供应商配置
			this.loadSupplierInfoShow();
			// 获取配置
			this.loadConf()
		},
		onShow() {
			if (getApp().globalData.fromEvaluateSearch) {
				this.keyword = getApp().globalData.evaluateSearchKey
				this.searchParams.page = 1
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
				this.loadData()
				getApp().globalData.fromEvaluateSearch = 0
			}
			if (getApp().globalData.evaluateRefresh) {
				this.searchParams.page = 1
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
				this.loadCountData()
				this.loadData()
				getApp().globalData.evaluateRefresh = 0
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			toService(order,supplierId){
				let content = `订单编号:${order.sn}\n供应商订单号:${order.thirdSn}\n订单总额:${order.total}\n订单内商品:`+order.items.map(item =>item.productName).join('、')
				onlineService({ "type": "order", "content": content,"vendorId": this.supplierCustomerGroup[supplierId]}).then(res=>{
					if(res.code === 0){
						window.location.href=res.data
					}
				})
			},
			getSupplierCustomerGroup(ids){
				ids = [...new Set(ids)]
				ids.forEach(id => {
					listCustomerGroupBySupplierId({}, 'supplierIds[]=' + id).then(res => {
						if (res.code === 0) {
							this.supplierCustomerGroup = {
								...this.supplierCustomerGroup,
								...res.data
							}
						}
					})
				})
			},
			loadData() {
				if (this.loadingType === 'loading') return
				uni.showLoading({
					mask: true,
					title: '正在加载...'
				})
				this.loadingType = 'loading'
				getOrderList({
					...this.searchParams,
					...this.filterSearchParams
				}).then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.code === 0) {
						const orderList = res.data.records
						const supplierIds = []
						orderList.forEach(master=>{
							 supplierIds.push(...master.orders.map(i=>i.supplierId))
						})
						if (this.searchParams.page === 1) {
							this.orderList = orderList || []
						} else {
							this.orderList.push(...orderList)
						}
						this.loadingType = this.orderList.length === res.data.total ? 'noMore' : 'more'
						if (this.loadingType === 'more') {
							this.searchParams.page += 1
						}
						this.getSupplierCustomerGroup(supplierIds)
					} else {
						this.loadingType = 'more'
					}
				}).catch(e => {
					console.log(e)
					this.loadingType = 'more'
					uni.hideLoading()

				})
			},
			getStatusData() {
				getAllStatus().then(res => {
					if (res.code === 0) {
						this.statusData = res.data
					}
				})
			},
			// 获取是否屏蔽供应商信息配置
			async loadSupplierInfoShow() {
				await showRuleSupplierInfoShow().then(res => {
					if (res.code === 0) {
						this.supplierInfoShow = !res.data;
					}
				})
			},
			loadConf() {
				// 是否支持再来一单
				qryConfByItemCode({
					code: "enableOneMoreOrder",
					tenant_id: uni.getStorageSync('deptinfo')[0].tenantId,
					dept_code: uni.getStorageSync('bizDeptInfo').deptCode
				}).then(res => {
					if (res.code === 0) {
						this.enableOneMoreOrder = res.data.val == '1'
					}
				})
				// 是否开启追评
				qryConfByItemCode({
					code: "addonReview",
					tenant_id: uni.getStorageSync('deptinfo')[0].tenantId,
					dept_code: uni.getStorageSync('bizDeptInfo').deptCode
				}).then(res => {
					if (res.code === 0) {
						this.enableAddReviewOrder = res.data.val == '1'
					}
				})
			},
			tabsChange(e) {
				this.swiperCurrent = e
				this.searchParams.status = this.tabs[this.swiperCurrent].status
				this.searchParams.page = 1
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
				this.loadData()
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onreachBottom() {
				if (this.loadingType === 'loading') return
				if (this.loadingType === 'more') {
					this.loadData()
				}
			},
			loadCountData() {
				getWaitReviewCount().then(res => {
					if (res.code === 0) {
						this.$set(this.tabs[0], 'count', res.data || 0)
					}
				})
				evaluationCount().then(res => {
					if (res.code === 0) {
						// 待追评
						this.$set(this.tabs[1], 'count', res.data.chaseEvaluationCount || 0)
						// 已评价
						this.$set(this.tabs[2], 'count', res.data.hasEvaluationCount || 0)
					}
				})
			},
			clickBack() {
				uni.navigateBack()
			},
			// 搜索
			toSearch() {
				uni.navigateTo({
					url: '/pages/order/search?from=evaluate&key=' + this.searchParams.keyword
				})
			}, // 筛选面板
			clickShowFilter() {
				this.showFilter = !this.showFilter
				if (this.showFilter) {
					this.filterParams = JSON.parse(JSON.stringify(this.oldFilterParams))
				}
			},
			// 供应商列表
			loadSupplierList() {
				orderMasterSupplierList().then(res => {
					if (res.code === 0) {
						this.supplierList = res.data
					}
				})
			},
			// 筛选-供应商
			changeSupplier(id) {
				if (this.filterParams.supplierIds.includes(id)) {
					this.filterParams.supplierIds.splice(this.filterParams.supplierIds.indexOf(id), 1)
				} else {
					this.filterParams.supplierIds.push(id)
				}
			},
			// 筛选-下单时间
			changeDate(type) {
				if (type === this.filterParams.dateType) {
					this.filterParams.dateType = -1
					this.filterParams.date = []
					return
				}
				this.filterParams.dateType = type
				if (type > 0) {
					this.filterParams.startTime = ''
					this.filterParams.endTime = ''
					this.filterParams.date = [moment().subtract(type, 'month').format('YYYY-MM-DD'), moment().format(
						'YYYY-MM-DD')]
				} else {
					this.filterParams.date = []
				}
				this.$forceUpdate()
			},
			// 下单时间选择器 type:1 开始日期 - 2 结束日期
			clickShowDatePicker(type) {
				this.filterParams.pickerType = type
				this.showDatePicker = true
			},
			confirmDate(e) {
				const map = {
					1: 'startTime',
					2: 'endTime'
				}
				this.filterParams[map[this.filterParams.pickerType]] = e.year + '-' + e.month + '-' + e.day
				this.changeDate(-1)
			},
			// 重置筛选
			resetFilterParams() {
				this.filterParams.startTime = ''
				this.filterParams.endTime = ''
				this.filterParams.date = []
				this.filterParams.dateType = -1
				this.filterParams.pickerType = 1
				this.filterParams.supplierIds = []
				this.filterSearchParams = {}
				this.$forceUpdate()
				// this.filterParams = this.oldFilterParams
			},
			// 确认筛选
			confirmFilterParams() {
				let startTime = this.filterParams.date.length > 0 ? this.filterParams.date[0] : this.filterParams
					.startTime ? this.filterParams.startTime : ''
				let endTime = this.filterParams.date.length > 1 ? this.filterParams.date[1] : this.filterParams.endTime ?
					this.filterParams.endTime : ''
				const params = {
					startTime: startTime ? startTime + ' 00:00:00' : '',
					endTime: endTime ? endTime + ' 23:59:59' : '',
					supplierIds: this.filterParams.supplierIds.join(',')
				}
				this.oldFilterParams = JSON.parse(JSON.stringify(this.filterParams))
				this.showFilter = false
				this.searchParams.page = 1
				this.filterSearchParams = params
				this.loadData()
			},
			// 去评价
			toEvaluate(item) {
				uni.navigateTo({
					url: `/pages/evaluate/evaluate?sn=${item.sn}`
				})
			},
			toSeeEvaluate(item, type = '') {
				let sn = item.sn;
				uni.navigateTo({
					url: `/pages/evaluate/evaluate-detail?sn=${sn}${type}`
				})
			},
			//再来一单
			addToCart(order) {
				uni.showLoading({
					title: '请稍后',
					mask: true
				})
				const params = {
					sn: order.sn
				}
				buyAgain(params).then(res => {
					if (res.code === 0) {
						uni.hideLoading();
						this.$util.msg('加入购物车成功')
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/cart/cart?type="group"'
							})
						}, 500)
					} else {
						uni.hideLoading();
					}
				})
			},
			// 申请售后
			clickAftersale(order, item, type) {
				let sn = order.sn
				let id = item.id
				let deptName = order.deptName
				const params = {
					orderItemId: id,
					orderSn: sn,
					type: type
				}
				applyAftersale(params).then(res => {
					if (res.code === 0) {
						if (res.data) {
							uni.navigateTo({
								url: `/pages/aftersale/aftersale?sn=${sn}&id=${id}&deptName=${deptName}&type=${type}`,
							})
						} else {
							this.$util.msg('没有可以发起售后申请商品的数量')
						}
					} else {
						this.$util.msg(res.message)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.my-swiper {
		height: calc(100% - 90rpx - 40px);
	}

	.order-item {
		display: flex;
		flex-direction: column;
		background: #fff;
		margin: 16rpx 16rpx 0 16rpx;
		border-radius: 20rpx;

		.order-list {
			margin: 10rpx;
			border-radius: 10rpx;
			background-color: #fff;
			font-size: 14px;

			.split-title {
				float: left;
				padding-top: 10px;
				color: #909090;
			}

			.split-img {
				height: 50rpx;
				float: left;
				padding-top: 12rpx;

			}

			.split-time {
				text-align: right;
				padding-top: 10px;
				padding-bottom: 10px;
			}

			.description {
				color: black;
			}

			text {
				font-size: 14px;
				color: $font-color-base;
			}
		}

		.i-top {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			height: 80upx;
			padding: 0 20upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
				width: 0;
				margin-right: 10rpx;
				display: flex;
				align-items: center;
				text{
					max-width: calc(100% - 54rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 10rpx;
				}
			}

			.img {
				width: 32upx;
				height: 32upx;
				margin-right: 6upx;
			}


			.state {
				margin-left: 10rpx;
				text-align: right;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			align-items: center;
			padding: 20upx;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
				background-color: #fff;
				background: url(../../static/error-img-60.png);
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
				overflow: hidden;

				.title {
					font-size: $font-base;
					color: $font-color-dark;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 0 10upx 10upx;

					.attr {
						float: left;
						width: fit-content;
					}

					.action {
						float: right;
						width: fit-content;
						height: fit-content;
						padding: 4rpx 16rpx;
						text-align: center;
						font-size: 12px;
						color: $font-color-dark;
						background: #fff;
						border-radius: 20px;
						border: 0.5px solid #C0C4CC;
					}
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20upx;

			.time-text {
				font-size: 14px;
			}

			.price-box {
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				// padding: 20upx 30upx;
				font-size: $font-sm + 2upx;
				color: $font-color-light;

				.num {
					margin: 0 8upx;
					color: $font-color-dark;
				}

				.price {
					font-size: $font-lg;
					color: $base-color;
					margin: 0 2upx 0 8upx;

					// &:before {
					// 	content: '￥';
					// 	font-size: $font-sm;
					// 	margin: 0 2upx 0 8upx;
					// }
					&:after {
						color: $base-color;
						font-size: 15px;
						margin-left: 8rpx;
					}
				}
			}
		}

		// .price-box {
		// 	display: flex;
		// 	justify-content: flex-end;
		// 	align-items: baseline;
		// 	// padding: 20upx 30upx;
		// 	font-size: $font-sm + 2upx;
		// 	color: $font-color-light;

		// 	.num {
		// 		margin: 0 8upx;
		// 		color: $font-color-dark;
		// 	}

		// 	.price {
		// 		font-size: $font-lg;
		// 		color: $font-color-dark;

		// 		// &:before {
		// 		// 	content: '￥';
		// 		// 	font-size: $font-sm;
		// 		// 	margin: 0 2upx 0 8upx;
		// 		// }
		// 	}
		// }

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding: 0 20rpx;
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 20px;
			border: 0.5px solid #C0C4CC;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				// background: #fff9f9;
				color: $base-color;
				border: 0.5px solid $base-color;

				&:after {
					border: 0.5px solid $base-color;
				}
			}
		}
	}

	.my-tabs {
		box-shadow: 0 0 10rpx 2rpx #ebebeb;
		position: sticky;
		z-index: 999;

		// /deep/.u-badge {
		// 	background-color: #1890ff;
		// }
	}

	.filter {
		margin-top: 90rpx;
		font-size: $my-font-size-middle;
		color: #aaa;

		&_b {
			height: 90rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&_h {
			padding: 20rpx 20rpx 0 20rpx;
			color: #303133;
		}

		&_w {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-right: 20rpx;

			&_split {
				line-height: 52rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
			}

			&_item {
				border-radius: 30rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
				text-align: center;
				padding: 4rpx 16rpx;
				color: #aaa;
				background-color: #f2f2f2;
				line-height: 40rpx;
				border: 2rpx solid transparent;

				.ph {
					color: #aaa;
				}

				&.date {
					width: calc((100% - 60rpx) / 3);
				}

				&.range {
					flex: 1;
					height: 52rpx;

					input {
						font-size: $my-font-size-middle;
						height: 40rpx;
						line-height: 40rpx;
					}
				}

				&.active {
					color: #ec808d;
					border-color: #ec808d;
					background-color: rgba(#ec808d, 0.2);
				}
			}
		}
	}
</style>
